import React,{Component} from 'react';
import "./tweet.css";
import {Link} from 'react-router-dom';
import { Button, Icon,Modal} from 'antd';

import Upload from './Upload';

import qs from 'qs';
import axios from 'axios';

export default class extends Component{


    constructor(props){
        super(props)
        this.state = {
            msg:"",
            previewImage:"",
            previewVisible:false,
            fileList:[],
            textLenght:140
        }
    }

    setTextLength(){
        var text = this.refs.texts.value;
        console.log('输入字符长度：',text.length)
        var sy = 140 - text.length;
        if(sy <= 0){
            sy = 0;
        }
        this.setState({
            textLenght: sy
        })
    }

    sendTweet(){
       
        if(this.refs.texts.value){
            this.refs.form.submit();
        }
    }

    
    render(){

        return(
            
            <div className="tweet-container">

                <header className="tweet-header">
                    <div className="header-main"> 
                        <Link to="/index/home">
                            <Icon type="arrow-left"  style={{float:"left",marginTop:"15px",marginLeft:"10px"}} />
                        </Link>
                        
                        <Button  type="primary"   onClick={this.sendTweet.bind(this)}  style={{float:"right",marginTop:"15px",marginRight:"10px"}}>推文</Button>
                    </div>
                </header>

                <div className="tweet-content">

                <form  ref="form" action="http://localhost:3008/article"  method="POST"  encType="multipart/form-data">
                    <img  className="tweet-avatar" src="https://pbs.twimg.com/profile_images/985074031631130624/a_VMPlEX_reasonably_small.jpg"/>
                    <div className="tweet-msg"  >
                        <textarea ref="texts" name="content" row="4"  onChange={this.setTextLength.bind(this)}></textarea>
                    </div>
                    <div className="line"></div>
                    <h6 style={{float:"right",color:"#999"}}>剩余：{ this.state.textLenght }</h6>
                    <Upload />
                    
                </form>
                    
                </div>

            </div>      
            
        )
    }
}